<!--
 * @Description: 
 * @Author:  huangshuai
 * @Date: 2023-11-07 10:09:01
 * @LastEditTime: 2023-11-08 11:25:32
 * @LastEditors: huangshuai 
-->
<template>
  <div class="check_dialog" v-loading="loading">
    <el-dialog
      v-model="dialogVisible"
      width="70%"
      :show-close="false"
      style="margin-top: 20px"
      :before-close="handleClose"
    >
      <div style="height: 600px; display: flex">
        <div style="width: 60%; height: 100%">
          <el-carousel height="600px">
            <el-carousel-item
              v-for="item in postDesc.pictureList"
              :key="item"
              style="height: 100%; display: flex; align-items: center"
            >
              <el-image
                :src="item"
                class="image"
                style="width: 100%"
                fit="cover"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>

        <div class="right_desc">
          <div style="display: flex; width: 40%; align-items: center">
            <el-image
              :src="postDesc.iconUrl"
              fit="cover"
              style="width: 30px; height: 30px; border-radius: 15px"
            ></el-image>
            <div style="margin-left: 15px">{{ postDesc.nickName }}</div>
          </div>

          <div style="margin: 8px auto">标题:{{ postDesc.titleName }}</div>
          <el-card class="content">
            <span>内容:{{ postDesc.content }}</span>
          </el-card>

          <div>
            <span
              @click="handleLike(1), (postDesc.likeNumber += 1)"
              v-if="!postData.postIsLike"
            >
              <img :src="NoLike" style="width: 20px; height: 20px" />{{
                postDesc.likeNumber
              }}</span
            >
            <span
              @click="handleLike(0), (postDesc.likeNumber -= 1)"
              v-if="postData.postIsLike"
            >
              <img :src="Like" style="width: 20px; height: 20px" />{{
                postDesc.likeNumber
              }}</span
            >

            <span style="margin-left: 10px">
              <img :src="Comment" style="width: 20px; height: 20px" />{{
                postDesc.commentNumber
              }}</span
            >
          </div>

          <div
            class="comment_all"
            v-infinite-scroll="getAllComment"
            :infinite-scroll-immediate="false"
          >
            <template v-for="item in postData.commentList">
              <div class="comment_single" v-for="(subItem, index) in item">
                <div class="comment_header">
                  <el-image
                    :src="subItem.iconUrl"
                    fit="cover"
                    style="width: 30px; height: 30px; border-radius: 15px"
                  ></el-image>
                  <div style="width: calc(100% - 40px)">
                    <div
                      style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                      "
                    >
                      <div>{{ subItem.nickName }}</div>
                      <div>
                        <span
                          v-if="!subItem.isLike"
                          @click="
                            handleCommentLike(subItem.id, 1, index),
                              (subItem.likeNumber = +subItem.likeNumber),
                              (subItem.likeNumber += 1)
                          "
                        >
                          <img
                            :src="NoLike"
                            style="width: 20px; height: 20px"
                          />{{ subItem.likeNumber }}</span
                        >
                        <span
                          v-if="subItem.isLike"
                          @click="
                            handleCommentLike(subItem.id, 0, index),
                              (subItem.likeNumber = +subItem.likeNumber),
                              (subItem.likeNumber -= 1)
                          "
                        >
                          <img
                            :src="Like"
                            style="width: 20px; height: 20px"
                          />{{ subItem.likeNumber }}</span
                        >
                      </div>
                    </div>
                    <div class="comment">
                      {{ subItem.content }}
                    </div>
                  </div>
                </div>
              </div>
            </template>

            <div
              v-if="emtryData"
              style="font-size: 16px; width: 100%; text-align: center"
            >
              没有更多评论
            </div>
          </div>
          <div class="comment_send">
            <el-input v-model="commentInput" placeholder="评论"></el-input>
            <el-button
              style="margin-left: 5px; height: 40px; bottom: 0"
              @click="handleSendComment"
              >发送</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import Like from "@/assets/images/like.png";
import NoLike from "@/assets/images/no-like.png";
import Comment from "@/assets/images/comment.png";
import {
  checkPost,
  postLike,
  addComment,
  lookAllComment,
  commentLike,
} from "@/api/owner";

//pinia
import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
const loading = ref<boolean>(false);

const postDesc = ref<any>({}); //帖子详情数据
//帖子里的相关数据
const postData = reactive<{ postIsLike: string | number; commentList: any }>({
  postIsLike: "",
  commentList: [[]] as any,
});

//发送评论
const commentInput = ref("");
const handleSendComment = async () => {
  loading.value = true;
  emtryData.value = false;
  await addComment(
    postDesc.value.id,
    userStore.userDesc.id,
    commentInput.value
  ).then(async () => {
    // ElMessage({
    //   message: "发送评论成功",
    //   type: "success",
    // });
    if (postData.commentList[0].length === 0 && page.value === 1) {
      await lookAllComment(postDesc.value.id, page.value, pageSize.value).then(
        (res: any) => {
          if (res.data.length > 0) {
            postData.commentList[page.value - 1] = res.data;
            page.value++;
          } else {
            emtryData.value = true;
          }
        }
      );
    }
    commentInput.value = "";

    if (postData.commentList[page.value - 2].length === 10) {
      await lookAllComment(postDesc.value.id, page.value, pageSize.value).then(
        (res: any) => {
          if (res.data.length > 0) {
            postData.commentList[page.value - 1] = res.data;
            page.value++;
          } else {
            emtryData.value = true;
          }
        }
      );
    } else {
      await lookAllComment(
        postDesc.value.id,
        page.value - 1,
        pageSize.value
      ).then((res: any) => {
        if (res.data.length > 0) {
          postData.commentList[page.value - 2] = res.data;
        } else {
          emtryData.value = true;
        }
      });
    }
  });
  loading.value = false;
};

//点赞评论
const handleCommentLike = async (
  id: number | string,
  like: number | string,
  index: number
) => {
  postData.commentList[page.value - 2][index].isLike = like;

  await commentLike(postDesc.value.id, id, like).then((res: any) => {
    ElMessage({
      message: res.message,
      type: "success",
    });
  });
};
//点赞帖子
const handleLike = (like: number | string) => {
  loading.value = true;
  postData.postIsLike = like;
  postLike(postDesc.value.id, like).then((res: any) => {
    ElMessage({
      message: res.message,
      type: "success",
    });
  });
  loading.value = false;
};

const page = ref(1);
const pageSize = ref(10);
const emtryData = ref(false);
//获取所有评论
const getAllComment = async () => {
  await lookAllComment(postDesc.value.id, page.value, pageSize.value).then(
    (res: any) => {
      if (res.data.length > 0) {
        postData.commentList[page.value - 1] = res.data;
        console.log(page.value - 1);
        console.log(postData.commentList[page.value - 1]);
        console.log(res.data);

        // res.data.forEach((item: any) => {
        //   postData.commentList.push(item);

        // });
        page.value++;
      } else {
        emtryData.value = true;
      }
    }
  );
};
const handleClose = (done: () => void) => {
  page.value = 1;
  postData.commentList = [];
  done();
};

//显示弹框
const dialogVisible = ref(false);
const showDialog = async (id: string | number) => {
  dialogVisible.value = true;
  loading.value = true;
  await checkPost(id).then(async (res: any) => {
    postData.postIsLike = res.data.isLike; // 让点赞变成响应式
    postDesc.value = res.data;

    postDesc.value.likeNumber = +postDesc.value.likeNumber;
    await getAllComment();
  });
  loading.value = false;
};

defineExpose({
  showDialog,
});
</script>
<style scoped lang="less">
.dialog-footer button:first-child {
  margin-right: 10px;
}
.check_dialog {
  :deep(.el-dialog__header) {
    display: none;
  }
  .right_desc {
    width: 40%;
    height: 100%;
    // border: 1px rgb(228, 228, 228) solid;
    box-shadow: 2px 2px 2px rgb(228, 228, 228), -2px -2px 2px rgb(228, 228, 228);
    padding: 10px;
    margin-left: 10px;
    .comment_all {
      width: 100%;
      overflow: auto;
      height: 349px;
      margin-bottom: 10px;
      margin-top: 10px;
      // overflow-y: auto;
      &::-webkit-scrollbar {
        // display: none;
        width: 6px;
        border-radius: 10px;
      }

      /* 修改滚动条轨道颜色 */
      &::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
      }

      /* 修改滚动条滑块颜色 */
      &::-webkit-scrollbar-thumb {
        background-color: #999;
        border-radius: 10px;
      }
      .comment_single {
        width: 95%;
        // padding: 5px;
        margin: 5px auto;
        border-bottom: 1px rgb(237, 237, 237) solid;
      }
      .comment_header {
        display: flex;
        width: 100%;
      }
    }
  }
}

.content {
  height: 100px;
  overflow-y: auto;
  width: 100%;
  overflow-wrap: break-word;
  margin: 10px 0;
}

.comment {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
  // :deep(.el-textarea) {
  //   ::-webkit-scrollbar {
  //     width: 6px; /* 修改滚动条的宽度 */
  //     display: none;
  //   }

  //   ::-webkit-scrollbar-thumb {
  //     background: #888; /* 修改滚动条拖动部分的颜色 */
  //     border-radius: 6px; /* 修改滚动条拖动部分的边框半径 */
  //   }

  //   ::-webkit-scrollbar-track {
  //     background: #eee; /* 修改滚动条轨道部分的颜色 */
  //   }
  // }
}
.comment_send {
  width: 100%;
  height: 40px;
  // border: 1px rgb(153, 153, 153) solid;
  display: flex;
}
</style>
